<template>
  <div class="side-menu">
    <div :class="`menu-header ${!collapsed?'closed':'open'}`" @click="collapsedHandle">
      <slot name="header"></slot>
      <Down theme="filled" v-if="!collapsed" size="24" fill="#333" :strokeWidth="2" strokeLinecap="square"/>
      <Up theme="filled" v-if="collapsed" size="24" fill="#333" :strokeWidth="2" strokeLinecap="square"/>
    </div>
    <div class="munu-item-group" v-if="collapsed">
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import {Down,Up} from '@icon-park/vue-next'
const Menu = defineComponent({
    name:'Menu',
    components:{
      Down,
      Up
    },
    setup() {
     const collapsed = ref(false)
     const collapsedHandle = ()=>{
       collapsed.value = !collapsed.value
     }
     return {
       collapsed,
       collapsedHandle
     }
    }
})
export default Menu
</script>

<style lang="scss">
.side-menu{
  font-size: 16px;;
  .menu-header{
    height: 46px;
    line-height: 46px;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
    padding: 0 10px;
    &:hover{
      background-color: rgba(255, 20, 43, 0.04);
    }
    &.open{
      background-color: rgba(255, 20, 43, 0.04);
      color: #ff0040;
    }

  }
  .side-munu-item{
    height: 46px;
    line-height: 46px;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
    &:hover{
      background-color: rgb(228 225 225);
    }
    a{
      color: #333;
      &.active{
        color: #ff0040;
      }
    }
  }
}
</style>